import { createRouter, createWebHistory } from 'vue-router'

import HomeView from '../views/HomeView.vue'
import studeno from '../views/tudy1/StuyDeno.vue'
import studeno2 from '@/views/tudy1/StuyDeno2.vue'
import studeno3 from '@/views/tudy1/StuyDeno3.jsx'
import studeno4 from '@/views/tudy1/StuyDeno4.jsx'
import stuydeno5 from '@/views/tudy1/StuyDeno5.vue'
import StuDemo6 from '@/views/tudy1/StuDemo6.vue'
import StuDemo7 from '@/views/tudy1/components/StuDemo1.vue'
import StuDemo8 from '@/views/tudy1/components/StuDemo2.vue'


import StuDemo21 from '../views/study2/StuDemo1.vue'
import StuDemo22 from '../views/study2/StuDemo2.vue'
import StuDemo23 from '../views/study2/StuDemo3.vue'
import StuDemo24 from '../views/study2/StuDemo4.vue'
import StuDemo25 from '@/views/study2/StuDemo5.vue'

import StuDemo31 from '@/views/study3/StuDemo1.vue'
import StuDemo32 from '../views/study3/StuDemo2.vue'
import StuDemo33 from '../views/study3/StuDemo3.vue'
import StuDemo34 from '../views/study3/StuDemo4.vue'
import StuDemo35 from '../views/study3/StuDemo5.vue'
import StuDemo36 from '../views/study3/StuDemo6.vue'
import StuDemo37 from '../views/study3/StuDemo7.vue'
import StuDemo38 from '../views/study3/StuDemo8.vue'

import StuDemo411 from '../views/study4/StuDemo1.vue'
import StuDemo412 from '../views/study4/StuDemo2.vue'
import StuDemo413 from '../views/study4/StuDemo3.vue'
import StuDemo414 from '../views/study4/StuDemo4.vue'
import StuDemo415 from '../views/study4/StuDemo5.vue'
import StuDemo416 from '../views/study4/StuDemo6.vue'
import StuDemo417 from '../views/study4/StuDemo7.vue'
import StuDemo418 from '../views/study4/StuDemo8.vue'
import StuDemo419 from '../views/study4/StuDemo9.vue'
import StuDemo420 from '../views/study4/StuDemo10.vue'

import StuDemo51 from '../views/study5/StuDemo1.vue'
import StuDemo52 from '../views/study5/StuDemo2.vue'
import StuDemo53 from '../views/study5/StuDemo3.vue'
import StuDemo54 from '../views/study5/StuDemo4.vue'
import StuDemo55 from '../views/study5/StuDemo5.vue'
import StuDemo56 from '../views/study5/SonDemofetch6.vue'
import StuDemo57 from '../views/study5/components/SonDemoAxios7.vue'
import StuDemo58 from '../views/study5/SonDemoAxios8.vue'
import StuDemo59 from '../views/study5/SonDemo6.vue'


import StuDemo60 from '@/views/study6/SonDemoRouter1.vue'
import StuDemo61 from '@/views/study6/SonDemoStore.vue'
import Sonroutre1 from '@/views/study6/components/Sonroutre1.vue'
import Sonroutre2 from '@/views/study6/components/Sonrouter2.vue'
import Sonroutre3 from '@/views/study6/components/SonRoutercountent.vue'

import ElemrntUI from '@/views/study7/ElemrntUI.vue'
import ElementUser from '@/views/study7/components/ElementUser.vue'
import ElementSole from '@/views/study7/components/ElementRole.vue'

import StduyDemo1 from '../views/studydemo/demo1.vue'


const study1 = [

  {
    path: '/studeno',
    name: 'studeno',
    component: studeno
  },
  {
    path: '/studeno2',
    name: 'studeno2',
    component: studeno2
  },
  {
    path: '/studeno3',
    name: 'studeno3',
    component: studeno3
  },
  {
    path: '/studeno4',
    name: 'studeno4',
    component: studeno4
  },
  {
    path: '/studeno5',
    name: 'studeno5',
    component: stuydeno5
  },
  {
    path: '/studemo6',
    name: 'studemo6',
    component: StuDemo6
  },
  {
    path: '/studemo7',
    name: 'studemo7',
    component: StuDemo7
  },
  {
    path: '/studemo8',
    name: 'studemo8',
    component: StuDemo8
  }
]

const study2 = [
  {
    path: '/studemo21',
    name: 'studemo21',
    component: StuDemo21
  },
  {
    path: '/studemo22',
    name: 'studemo22',
    component: StuDemo22
  },
  {
    path: '/studemo23',
    name: 'studemo23',
    component: StuDemo23
  },
  {
    path: '/studemo24',
    name: 'studemo24',
    component: StuDemo24
  },
  {
    path: '/studemo25',
    name: 'studemo25',
    component: StuDemo25
  }
]

const study3 = [
  {
    path: '/studemo31',
    name: 'studemo31',
    component: StuDemo31
  },
  {
    path: '/studemo32',
    name: 'studemo32',
    component: StuDemo32
  },
  {
    path: '/studemo33',
    name: 'studemo33',
    component: StuDemo33
  },
  {
    path: '/studemo34',
    name: 'studemo34',
    component: StuDemo34
  },
  {
    path: '/studemo35',
    name: 'studemo35',
    component: StuDemo35
  },
  {
    path: '/studemo36',
    name: 'studemo36',
    component: StuDemo36
  },
  {
    path: '/studemo37',
    name: 'studemo37',
    component: StuDemo37
  },
  {
    path: '/studemo38',
    name: 'studemo38',
    component: StuDemo38
  }
]

const study4 = [
  {
    path: '/studemo411',
    name: 'studemo411',
    component: StuDemo411
  },
  {
    path: '/studemo412',
    name: 'studemo412',
    component: StuDemo412
  },
  {
    path: '/studemo413',
    name: 'studemo413',
    component: StuDemo413
  },
  {
    path: '/studemo414',
    name: 'studemo414',
    component: StuDemo414
  },
  {
    path: '/studemo415',
    name: 'studemo415',
    component: StuDemo415
  }
  ,
  {
    path: '/studemo416',
    name: 'studemo416',
    component: StuDemo416
  }
  ,
  {
    path: '/studemo417',
    name: 'studemo417',
    component: StuDemo417
  },
  {
    path: '/studemo418',
    name: 'studemo418',
    component: StuDemo418
  },
  {
    path: '/studemo419',
    name: 'studemo419',
    component: StuDemo419
  },
  {
    path: '/studemo420',
    name: 'studemo420',
    component: StuDemo420
  }
]

const study5 = [
  {
    path: '/studemo51',
    name: 'studemo51',
    component: StuDemo51
  },
  {
    path: '/studemo52',
    name: 'studemo52',
    component: StuDemo52
  },
  {
    path: '/studemo53',
    name: 'studemo53',
    component: StuDemo53
  }
  ,
  {
    path: '/studemo54',
    name: 'studemo54',
    component: StuDemo54
  },
  {
    path: '/studemo55',
    name: 'studemo55',
    component: StuDemo55
  }
  ,
  {
    path: '/studemo56',
    name: 'studemo56',
    component: StuDemo56
  },
  {
    path: '/studemo57',
    name: 'studemo57',
    component: StuDemo57
  },
  {
    path: '/studemo58',
    name: 'studemo58',
    component: StuDemo58
  }
  ,
  {
    path: '/studemo59',
    name: 'studemo59',
    component: StuDemo59
  }
]

const study6 = [
  {
    path: '/StuDemo60',
    name: 'StuDemo60',
    component: StuDemo60,
    children: [
      {
        // path: '/Sonroutre1/:id/:title/:countent',
        path: '/Sonroutre1',
        name: 'Sonroutre1',
        component: Sonroutre1,
        children: [
          {
            path: 'Sonroutre3',
            name: 'Sonroutre3',
            component: Sonroutre3,
            props(route: { query: any }) {
              return route.query
            },
          }
        ]
      },
      {
        path: '/Sonrouter2',
        name: 'Sonroutre2',
        component: Sonroutre2
      },
    ]
  },

  {
    path: '/StuDemo61',
    name: 'StuDemo61',
    component: StuDemo61
  }
]

const study7 = [
  {
    path: '/ElemrntUI',
    name: 'ElemrntUI',
    component: ElemrntUI,
    meta: { title: '首页' },
    children: [
      {
        path: '/ElementUser',
        name: 'ElementUser',
        component: ElementUser,
        meta: { title: '用户管理' },
      },
      {
        path: '/ElementSole',
        name: 'ElementSole',
        component: ElementSole,
        meta: { title: '角色管理' },
      }
    ]
  },
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [

    {
      path: '/',
      name: 'home',
      component: HomeView,
      meta: { title: '首页' },
    },
    ...study7,
    // {
    //   path: '/about',
    //   name: 'about',
    //   // route level code-splitting
    //   // this generates a separate chunk (About.[hash].js) for this route
    //   // which is lazy-loaded when the route is visited.
    //   component: () => import('../views/AboutView.vue')
    // },
    {
      path: '/stduydemo1',
      name: 'stduydemo1',
      component: StduyDemo1
    },
    ...study1,
    ...study2,
    ...study3,
    ...study4,
    ...study5,
    ...study6
  ]
})

export default router
